import React, { PureComponent } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
class swiper extends PureComponent {
  render() {
    let { data, handleChangeImg } = this.props;
    
    
    return (
      <Swiper
        style={{ height: '100%' }}
        centeredSlides={true}
        slideToClickedSlide={true}
        speed={1000}
        spaceBetween={0} // slide间隔
        slidesPerView={4}
      >
        {
          data?data.map((el,i)=>(<SwiperSlide key={i}>
            {
              ({ isActive }) => {
                if (isActive === true) {
                  handleChangeImg(el)
                }
                return (
                  <div className='film-item' style={isActive ? { paddingTop: '0' } : { paddingTop: '0.26rem' }}>
                    <div className='img-warp'>
                      <img src={el.poster} alt="" />
                    </div>
                  </div>
                )
              }
            }
          </SwiperSlide>)):<></>
        }
      </Swiper>
    );
  }
}

export default swiper;